<template>
  <div class="container">
    <view class="wrap">
      <view class="title flex alignCenter justifyBetween fz14">
        <view>当前共
          <text>{{ total }}</text>
          件商品
        </view>
        <view @click="toEdit=!toEdit">{{toEdit?"取消":"管理"}}</view>
      </view>
      <view class="list">
        <view class="box flex" v-for="(item, index) in list" :key="index">
          <view class="flex alignCenter">
            <view class="check" @click="item.check = !item.check" v-if="toEdit">
              <view class="ye" v-if="item.check">
                <uv-icon size="20" name="checkmark-circle-fill" color="#E93323"></uv-icon>
              </view>
              <view class="no" v-else></view>
            </view>
            <view class="image shrink">
              <image :src="item.image" mode="aspectFill" />
            </view>
          </view>

          <view class="right">
            <view class="title fz14">{{item.storeName}}</view>
            <view class="price fz14">¥{{item.price}}</view>
          </view>
        </view>
      </view>

      <uv-empty mode="favor" v-if="!list.length"></uv-empty>
    </view>

    <view class="actionBtn flex alignCenter justifyBetween" v-if="toEdit">
      <view @click="checkAllFunc" class="flex alignCenter justifyCenter">
        <view class="ye" v-if="checkAll">
          <uv-icon size="20" name="checkmark-circle-fill" color="#E93323"></uv-icon>
        </view>
        <view class="no" v-else></view>
        全选
      </view>
      <uv-button color="#E93323" @click="cancelCollection" :plain="true" text="取消收藏" shape="circle"></uv-button>
    </view>

    <uv-load-more :status="status" />
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let params = {
  page: 1,
  limit: 10,
};
let list = ref([]);
let totalPage = 0;
let total = ref(0);
let status = ref("loadmore");
let toEdit = ref(false);
let checkAll = ref(false);

onLoad((e) => {
  uni.setNavigationBarTitle({
    title: e.name,
  });
  getInfo();
});

onReachBottom(() => {
  getMore();
});

let hasChect = computed(() => {
  let arr = [];
  list.value.forEach((element) => {
    if (element.check) arr.push(element);
  });
  return arr;
});

async function cancelCollection() {
  if (!hasChect.value.length) return proxy.$utils.showToast("请选择商品");
  for (let index = 0; index < hasChect.value.length; index++) {
    const element = hasChect.value[index];
    await proxy.$shopApis.cancelCollect({
      ids: element.id,
    });
    let current = proxy.$utils.findIndexByField(list.value, "id", element.id);
    if (current != -1) {
      list.value.splice(current, 1);
    }
  }
  toEdit.value = false;
  proxy.$utils.showToast("取消收藏成功");
  getInfo();
}

function getMore() {
  if (params.page >= totalPage) return;
  params.page++;
  getInfo();
}

function checkAllFunc() {
  list.value.forEach((element) => {
    element.check = !checkAll.value;
  });
  checkAll.value = !checkAll.value;
}

async function getInfo() {
  try {
    status.value = "loading";
    let resp = await proxy.$shopApis.collectList(params);
    if (resp.list.length) {
      list.value.push(...resp.list);
    }
    totalPage = resp.totalPage;
    total.value = resp.total;
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
}
</script>


<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 15px 15px 85px 15px;
  .wrap {
    border-radius: 10px;
    background-color: white;
    padding: 15px;
    .title {
      text {
        color: #e93323;
      }
    }
    .list {
      .box {
        margin-top: 15px;
        .image {
          width: 65px;
          height: 65px;
          image {
            width: 100%;
            display: block;
            height: 100%;
            border-radius: 10px;
          }
        }
        .right {
          margin-left: 15px;
          .price {
            color: #e93323;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .no {
    width: 18px;
    height: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    margin-right: 10px;
  }
  .ye {
    margin-right: 10px;
  }
  .actionBtn {
    position: fixed;
    left: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 15px 25px 15px;
    background-color: white;
  }
}
</style>
